import Taro, { Component } from '@tarojs/taro'
import { Button, View } from '@tarojs/components'
import { AtRate } from 'taro-ui'
import classNames from 'classnames'
import {formatTime, headImg} from '@/utils/utils'
// import GoodsImg from '@/components/goods/goods-img/index'
// import GoodsPrice from '@/components/goods/goods-price/index'
import { toCommentInfoPage, toGoodsPage } from '@/utils/page_router'
import userHeadImg from "@/assets/icon/user-avatar.png";
import './index.scss'
import {NeedScore, SalePrice} from "@/components/index";

interface IProps {
  info: any
  showGoods?: boolean
}

const hideName = (nickName: string = '') => {
  if (nickName.length > 2) {
    const start = nickName.substr(0, 1)
    const end = nickName.substr(-1, 1)
    return `${start}**${end}`
  }
  return nickName
}

/**
 * 评论信息
 */
export default class Index extends Component<IProps, {}> {
  props: any
  state: any

  static options = {
    addGlobalClass: true
  }

  constructor (props) {
    super(...arguments)
    this.state = {
      info: props.info
    }
  }

  //  查看图片
  onSeeImg(list, url, e) {
    e.stopPropagation()
    Taro.previewImage({ current: url, urls: list })
  }

  render() {
    const prefixCls = 'comment-item'
    const { info={} } = this.state
    const { showGoods, className } = this.props
    const goods = Object.assign(info.productInfo || {}, info.productSnap || {})
    const userInfo = info.userInfo || {}

    return (<View className={classNames(prefixCls, className)}>
      <View className={`${prefixCls}__head`} onClick={() => toCommentInfoPage(info.id)}>
        {/* 用户信息 */}
        <View className={`${prefixCls}__user`}>
          <View className={`${prefixCls}__user-avatar`}>
            {/*<Image src={userInfo.headImg}/>*/}
            <img src={userInfo.headImg || userHeadImg}/>
          </View>
          <View className={`${prefixCls}__user-info d-f f-d-c`}>
            <View className={`${prefixCls}__user-name t-o-e`}>{hideName(userInfo.nickName)}</View>
            <View className={`${prefixCls}__grade`}>
              {/*<View className={`${prefixCls}__grade-title p-r-10`}>评分</View>*/}
              <AtRate value={info.productScore} size={16}/>
            </View>
          </View>
          <View className={`${prefixCls}__user-time`}>{formatTime(info.createdAt, 'YYYY-MM-DD')}</View>
        </View>

        {/* 评价信息 */}
        <View className={`${prefixCls}__content`}>{ info.comment || '这家伙很懒，什么也没有留下。' }</View>

        {/* 评价图片 */}
        {info.pics && info.pics.length && <View className={`${prefixCls}__photo d-f f-w-w`}>
          {info.pics.map((url, k) => {
            return (<View key={k} className={`${prefixCls}__photo-item`} onClick={this.onSeeImg.bind(this, info.pics, url)}>
              {/*<Image src={url} lazyLoad/>*/}
              <img src={url}/>
            </View>)
          })}
        </View>}
      </View>

      {/* 商品信息 */}
      {showGoods && <View className={`${prefixCls}__goods`} onClick={() => toGoodsPage(goods)}>
        <View className={`${prefixCls}__goods-img`}>
          {/*<GoodsImg info={goods} lazyLoad/>*/}
          {/*<Image src={headImg(goods.images)} lazyLoad/>*/}
          <img src={headImg(goods.images)}/>
        </View>
        <View className={`${prefixCls}__goods-info d-f f-d-c j-c-b`}>
          <View className={`${prefixCls}__goods-name t-o-e`}>{goods.name}</View>
          {goods.specSnap && <View className={`${prefixCls}__goods-attr t-o-e-2`}>{goods.specSnap}</View>}
          <View className={`${prefixCls}__goods-other d-f j-c-b`}>
            {/*<GoodsPrice goods={goods} saleSize={36}/>*/}
            <View className={`${prefixCls}__price d-f a-i-b`}>
              <NeedScore goods={goods} priceSize={32} className='m-r-10'/>
              <SalePrice goods={goods} priceSize={28} isNumber/>
            </View>
            <Button disabled={!goods.isOnSale} className={`${prefixCls}__goods-btn xf-btn xf-btn-round xf-btn-danger`}>
              {/*{info.isOnSale ? (info.stockNumber ? '立即抢购' : '已售罄') : '已结束'}*/}
              {goods.isOnSale ? '立即抢购' : '已下架'}
            </Button>
          </View>
        </View>
      </View>}
    </View>)
  }
}
